
<h3 class="h3_test">100 steps, snap off</h3>
<p>When you drag the black box horizontally the number below should change to reflect the position. The step indicator should reflect the initialPosition option of 50.</p>
<p>
	<a href="#" id="attach1" >Attach</a>
	<a href="#" id="detach1">Detach</a>
</p>
<div id="area">
	<div id="knob"></div>
</div>
<p id="upd">XX</p>

<h3 class="h3_test">10 steps, snap on</h3>
<p>When you drag the black box horizontally the number below should change to reflect the position in 10 steps that "snap".</p>
<div id="area2">
	<div id="knob2"></div>
</div>
<p id="upd2">XX</p>

<h3 class="h3_test">setRange</h3>
<p>When you click the setRange button the slider should continue to work properly with a range of 200-50.</p>
<div id="area3">
	<div id="knob3"></div>
</div>
<button id="setRange">setRange</button>
<p id="upd3">XX</p>


<h3 class="h3_test">A range of -20 to 20 whith a initial value of 0</h3>
<p>The knob should be in the middle of the slider</p>
<div id="area4">
	<div id="knob4"></div>
</div>
<p id="upd4">XX</p>

<h3 class="h3_test">Monitor events</h3>
<p>When the slider is initalized it should fire each event only once (change, tick and complete). </p>
<div id="area5">
	<div id="knob5"></div>
</div>
<br />
<p>change events fired:<span id="upd5-change"></span><p>
<p>tick events fired:<span id="upd5-tick"></span></p>
<p>move events fired:<span id="upd5-move"></span></p>
<p>complete events fired:<span id="upd5-complete"></span></p>

<h3 class="h3_test">resizable slider</h3>
<p>Slider should resize with window and knob should maintain correct step on resize. Knob should also be able to travel full length of slider.</p>
<div id="area6">
	<div id="knob6"></div>
</div>
<p id="upd6">XX</p>

<h3 class="h3_test">This slider should work with your mousewheel</h3>
<p>The knob should move when scrolling the mousewheel</p>
<div id="area7">
	<div id="knob7"></div>
</div>

<h3 class="h3_test">Knob positioned absolute</h3>
<p>The knob's position should not be set to position relative if it is currently absolute.</p>
<div id="area8">
	<div id="knob8"></div>
</div>

<!-- /* Specs 9 -13 are also present in other Specs, automated with Syn.JS, waiting for <IE9 to be dropped */ -->

<h3 class="h3_test">Snap</h3>
<p>The knob should drag to last position (30) when snap is set to true and knob is bigger than slider.</p>
<div id="area9">
	<div id="knob9"></div>
</div>
<p id="upd9">XX</p>

<h3 class="h3_test">Decimal values</h3>
<p>The knob should change in steps, and give decimal values.</p>
<div id="area10">
	<div id="knob10"></div>
</div>
<p id="upd10">XX</p>

<h3 class="h3_test">Decimal values</h3>
<p>The knob should change with no steps (steps == false), and give decimal values.</p>
<div id="area11">
	<div id="knob11"></div>
</div>
<p id="upd11">XX</p>

<h3 class="h3_test">Modulus division</h3>
<p>It should handle correct numbers with decimals, and perform correct modulus division. (Drag to the end to fire result)</p>
<div id="area12">
	<div id="knob12"></div>
</div>
<p id="upd12">XX</p>

<style type="text/css" media="screen">
	#area, #area2, #area3, #area4, #area5, #area6, #area7, #area8, #area9, #area10, #area11, #area12 {
		background: #ccc;
		height: 20px;
		width: 200px;
		position: relative;
	}
	#area6 {
		width: 100%;
	}
	#knob, #knob2, #knob3, #knob4, #knob5, #knob6, #knob7, #knob8, #knob9, #knob10, #knob11, #knob12 {
		height: 20px;
		width: 20px;
		background: #000;
		cursor:col-resize !important;
		cursor:pointer;
	}
	#knob8 {
		position: absolute;
	}
	#knob9 {
		width: 32px;
		height: 32px;
		position: relative;
		top: -6px;
	}
</style>

<script src="/depender/build?require=More/Slider"></script>
<script>

var mySlide = new Slider($('area'), $('knob'), {
	initialStep: 50,
	onChange: function(pos){
		$('upd').set('html', pos);
	}
});

$('attach1').addEvent('click', function(event){
	event.stop();
	mySlide.attach();
});
$('detach1').addEvent('click', function(event){
	event.stop();
	mySlide.detach();
});


var mySlide2 = new Slider($('area2'), $('knob2'), {
	steps: 10,
	snap: true,
	initialStep: 5,
	onChange: function(pos){
		$('upd2').set('html', pos);
	}
}).set(0);

var mySlide3 = new Slider($('area3'), $('knob3'), {
	steps: 100,
	range: [0,100],
	onChange: function(pos){
		$('upd3').set('html', pos);
	}
}).set(0);
$('setRange').addEvent('click',function(){
	mySlide3.setRange([200,50]);
});

var mySlide4 = new Slider($('area4'), $('knob4'), {
	range: [-20, 20],
	initialStep: 0,
	onChange: function(pos){
		$('upd4').set('html', pos);
	}
});

var change = 0, tick = 0, move = 0, complete = 0;

var mySlide5 = new Slider($('area5'), $('knob5'), {
	onChange: function(step){
		change++;
		$('upd5-change').set('text', change);
	},
	onTick: function(position){
		tick++;
		$('upd5-tick').set('text', tick);
		if (this.options.snap) position = this.toPosition(this.step);
		this.knob.setStyle(this.property, position);
	},
	onMove: function(){
		move++;
		$('upd5-move').set('text', move);
	},
	onComplete: function(step){
		complete++;
		$('upd5-complete').set('text', complete);
	}
});

var mySlideStretch = new Slider($('area6'), $('knob6'), {
	onChange: function(position){
		$('upd6').set('html', position);
	}
});
window.addEvent('resize', function(){
	mySlideStretch.autosize();
});

new Slider('area7', 'knob7', {
	wheel: true
});

new Slider('area8', 'knob8');

new Slider('area9', 'knob9', {
	steps: 5,
	snap: true,
	initialStep: 5,
	range: [5, 30],
	onChange: function(pos){
		$('upd9').set('html', pos);
	}
});

new Slider('area10', 'knob10', {
	range: [0, 10],
	steps: 20,
	initialStep: 0,
	snap: true,
	onChange: function(pos){
		$('upd10').set('html', pos);
	}
});

new Slider('area11', 'knob11', {
	range: [0, 100],
	steps: false,
	initialStep: 0,
	onChange: function(pos){
		$('upd11').set('html', pos);
	}
});

new Slider('area12', 'knob12', {
	range: [0, 8067],
	steps: 100,
	initialStep: 0,
	initialStep: 0,
	onChange: function(pos){
		$('upd12').set('html', pos);
	}
});

</script>
